
// 首页业务

//从本地获取用户名
const user = localStorage.getItem('user')
document.querySelector('.username').innerHTML = user
//每次进入页面都先判断有无token
checkLogin()
//退出
logout()

//渲染统计数据
async function getData() {
    const token = localStorage.getItem('token')
    const { data: {
        groupData, overview, year, salaryData, provinceData
    } } = await axios({
        url: '/dashboard',
        // headers: {
        //     Authorization: token
        // }

    })
    // console.log(res);
    document.querySelector('.salary').innerHTML = overview.salary
    document.querySelector('.student_count').innerHTML = overview.student_count
    document.querySelector('.age').innerHTML = overview.age
    document.querySelector('.group_count').innerHTML = overview.group_count

    renderYearSalary(year)

    renderSalary(salaryData)

    renderGroup(groupData)

    renderGenderData(salaryData)

    renderProvince(provinceData)
}
getData()

//薪资走势 year
function renderYearSalary(year) {
    //获取元素 加实例化
    var myChart = echarts.init(document.getElementById('line'));
    const option = {
        title: {
            text: '2022全学科薪资走势',
            textStyle: {
                fontsize: 10
            },

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: year.map(item => item.month),
            axisLine: {
                lineStyle: {
                    color: '#999',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'doshed'
                }
            }
        },
        series: [
            {
                // data: [820, 932, 901, 934, 1290, 1330, 1320],
                data: year.map(item => item.salary),
                type: 'line',
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#c0def7' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#e6f1fc' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }

                },
                smooth: true,
                //标记的大小
                symbolSize: 8,
                //线条样式
                lineStyle: {
                    width: 6,
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#4a9eea' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5f7ceb' // 100% 处的颜色
                        }],

                    }

                }
            }
        ]
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
}

//薪资分布 salaryData
function renderSalary(salaryData) {
    //实例化echarts
    //设置配置项目
    //拿到配置项 显示图表
    const salary = document.querySelector('#salary')
    var myChart = echarts.init(salary)
    const option = {

        tooltip: {
            trigger: 'item',
            //data是提示内容
            data: ['班级薪资分布']
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                //  和提示组件中的值一样
                name: '班级薪资分布',
                type: 'pie',
                radius: ['30%', '40%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },

                labelLine: {
                    show: false
                },
                // data: [
                //     // { value: 1048, name: 'Search Engine' },
                //     // { value: 735, name: 'Direct' },
                //     // { value: 580, name: 'Email' },
                //     // { value: 484, name: 'Union Ads' },

                // ]
                data: salaryData.map(item => {
                    return { value: item.g_count + item.b_count, name: item.label }
                })
            }
        ],
        color: ['#f0a645', '#6295f8', '#63b9f4', '#6ad09e']
    };
    myChart.setOption(option);
}

//分组数据 groupData
function renderGroup(groupData) {
    const lines = document.querySelector('#lines')
    var myChart = echarts.init(lines)
    const option = {
        xAxis: {
            type: 'category',
            //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data: groupData[1].map(item => item.name),
            axisLine: {
                lineStyle: {
                    color: '#999',
                    type: 'dashed'
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                type: 'dashed'
            }
        },
        series: [
            {
                // data: [120, 200, 150, 80, 70, 110, 130],
                data: groupData[1].map(item => item.hope_salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#6fdca3'
                        }, {
                            offset: 1, color: '#cbfde3'
                        }]
                    }
                }
            },
            {
                //data: [120, 200, 150, 80, 70, 110, 130],
                data: groupData[1].map(item => item.salary),
                type: 'bar',
                itemStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#6faff9'
                        }, {
                            offset: 1, color: '#d2e3f8'
                        }]
                    }
                }
            }
        ]
    };
    myChart.setOption(option)

    //点击分组数据
    const btns = document.querySelector('#btns')
    btns.addEventListener('click', function (e) {
        if (e.target.classList.contains('btn')) {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            const index = e.target.innerHTML
            option.xAxis.data = groupData[index].map(item => item.name)
            option.series[0].data = groupData[index].map(item => item.hope_salary)
            option.series[1].data = groupData[index].map(item => item.salary)
            myChart.setOption(option)
        }
    })
}

//男女分布
function renderGenderData(salaryData) {
    const gender = document.querySelector('#gender')
    const myChart = echarts.init(gender)
    // const datas = [
    //     ////////////////////////////////////////
    //     [
    //         { name: '圣彼得堡来客', value: 5.6 },
    //         { name: '陀思妥耶夫斯基全集', value: 1 },
    //         { name: '史记精注全译（全6册）', value: 0.8 },
    //         { name: '加德纳艺术通史', value: 0.5 },


    //     ],
    //     // ////////////////////////////////////////
    //     [
    //         { name: '银河帝国5：迈向基地', value: 3.8 },
    //         { name: '俞军产品方法论', value: 2.3 },
    //         { name: '艺术的逃难', value: 2.2 },
    //         { name: '第一次世界大战回忆录（全五卷）', value: 1.3 },


    //     ],
    //     ////////////////////////////////////////

    // ];
    const datas = [
        salaryData.map(item => {
            return { name: item.label, value: item.b_count }
        }),
        salaryData.map(item => {
            return { name: item.label, value: item.g_count }
        }),
    ]
    const option = {
        title: [
            {
                text: '男女薪资分布',
                left: 'center',
                textStyle: {
                    color: '#999',
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
            {
                text: '男',
                left: 'center',
                top: '40%',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14
                }
            },
            {
                text: '女',
                left: 'center',
                bottom: '15%',
                textStyle: {
                    fontWeight: 'normal',
                    fontSize: 14
                }
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        series: datas.map(function (data, idx) {
            var top = idx * 40 + 10;
            return {
                type: 'pie',
                radius: [45, 60],
                top: top + '%',
                height: '33.33%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    alignTo: 'edge',

                    minMargin: 5,
                    edgeDistance: 10,
                    lineHeight: 15,
                    rich: {
                        time: {
                            fontSize: 10,
                            color: '#999'
                        }
                    }
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 80
                },
                labelLayout: function (params) {
                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points
                    };
                },
                data: data,
                color: ['#fe9f01', '#2e98ff', '#00c1fd', '#00d895']
            };
        })
    };
    myChart.setOption(option)
}

//籍贯分布 provinceData
function renderProvince(mapData) {
    const map = document.querySelector('#map')
    const myChart = echarts.init(map)

    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]

    dataList.forEach(item => {
        //find找数组元素 如果能找到返回该数组元素 找不到undefined
        const res = mapData.find(ele => ele.name.includes(item.name))
        console.log(res);

        if (res) {
            //2.拿后台返回的value值给datalist中单value
            item.value = res.value
        }
    })
    const option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,

            },
        ],
    }
    myChart.setOption(option)
}